---
permalink: '/design-system/typography/index.html'
title: 'Typography'
---

{% extends "design-system.njk" %}
{% set title = 'Typography' %}

{% block inner %}
<nav class="cluster" aria-label="table of contents">
  <a href="#sizes">Sizes</a>
  <a href="#sizes">Fonts</a>
</nav>

<h2 id="sizes">Sizes</h2>
<div class="aside flow bg-state-info-bg color-state-info-text">
<p>Text sizes follow a fluid scale, meaning that text scales based on the size of the viewport and follows a sizing ratio.</p>
</div>

{% for size in design.tokens.textSizes %}
  <p class="text-{{ size.name | slug }} weight-bold leading-flat">{{ size.name }} (min: {{ size.min }}px / max: {{ size.max }}px)</p>
{% endfor %}

<hr />

<h3>Usage</h3>

<div class="table-wrapper breakout">
  <table>
    <thead>
      <tr>
        <th>Utility Class</th>
        <th>Sass function</th>
      </tr>
    </thead>
    <tbody>
      {% for size in design.tokens.textSizes %}
        <tr>
          <td>
            <code>.text-{{ size.name | slug }}</code>
          </td>
          <td><code>get-size('{{ size.name | slug }}')</code></td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<h2 id="sizes">Fonts</h2>

{% for font in design.tokens.fonts %}
  <p class="font-{{ font.name | slug }} text-size-4">{{ font.name }}</p>
  <p class="flow-space-base"><em>{{ font.description }}</em></p>
{% endfor %}

<hr />

<h3>Usage</h3>

<div class="table-wrapper breakout">
  <table>
    <thead>
      <tr>
        <th>Utility Class</th>
        <th>Sass mixin</th>
      </tr>
    </thead>
    <tbody>
      {% for font in design.tokens.fonts %}
        <tr>
          <td>
            <code>.font-{{ font.name | slug }}</code>
          </td>
          <td><code>@include apply-utility('font', '{{ font.name | slug }}')</code></td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}